<#include "header1.ftl"/>

<style>
    a{
        cursor: pointer;
    }
    .news-list{
        margin: 0;
        list-style: none;
        padding: 0
    }
    .news-list li{
        border-bottom: 1px solid #e6e7e8;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .news-list li a{
        color:#4a4747 !important;
        text-decoration: none !important;
    }
    .news-list li a:hover{
        color: #1397ff !important;
    }
    .news-list li aside{
        font-size: 12px;
        line-height: 24px;
        color: #999;
    }
    .news-list li p{
        color: #999;
        font-size: 14px;
        margin: 0;
        line-height: 30px;
       /* overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        word-wrap: break-word;*/
    }
</style>
<#include "header2.ftl"/>
<div class="main" style="margin-top:10px;">
    <div class="container">
        <ul class="breadcrumb" id="categoryName">
            <li class="active" style="font-family: Microsoft YaHei,serif;">最新动态</li>
        </ul>
        <div class="row margin-bottom-40">
            <div class="col-md-12 col-sm-12">
                <ul class="news-list">

                </ul>
                <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
            </div>
        </div>
    </div>
</div>
<#include "footer1.ftl"/>
<script>
    var totalPages = 0;
    function date(data){
        if(data==null||data==""){
            return "";
        }
        var time = new Date(data);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        if (m >= 0 && m <= 9) {
            m = "0" + m;
        }
        var d = time.getDate();//日
        if (d >= 0 && d <= 9) {
            d = "0" + d;
        }
        return (y+"-"+m+"-"+d);
    }

    function createTable(data){
        for (var i = 0; i < data.data.length; i++) {
            var news = data.data[i];
            $(".news-list").append('<li><a href="javascript:void(0)" onclick="loadNewsDetail('+news.id+')"><h1>' + news.title + '</h1></a><aside>'+date(news.updateTime)+'</aside><p>'+news.content+'</p></li>');
            $clamp($(".news-list").find("p")[i], {clamp: 2});
        }

    }

    function loadNewsDetail(id){
        window.location = '/index/news?id='+id;
    }

    $(function () {
        var index = layer.load(3);
        $.post('/index/getNewsList',{start:0,length:10},function (data) {
            layer.close(index);
            if (data.recordsTotal > 0){
                totalPages = data.recordsTotal%10 == 0?data.recordsTotal/10 : data.recordsTotal/10+1;
                createTable(data)

                $('#pageLimit').bootstrapPaginator({
                    currentPage: 1,//当前页。
                    totalPages: totalPages,//总页数。
                    size:"normal",//应该是页眉的大小。
                    bootstrapMajorVersion: 3,//bootstrap的版本要求。
                    alignment:"right",
                    numberOfPages:5,//显示的页数
                    itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
                        switch (type) {
                            case "first": return "首页";
                            case "prev": return "上一页";
                            case "next": return "下一页";
                            case "last": return "末页";
                            case "page": return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
                       $(".news-list").html("");
                        window.scrollTo(0,0);
                        var index = layer.load(3);
                       $.post('/index/getNewsList',{start:(page-1)*10,length:10},function (data) {
                           layer.close(index);
                           createTable(data)
                       })
                    }
                });
            }else{
                $(".news-list").css('background-color','white');
                $(".news-list").css('text-align','center');
                $(".news-list").append('<img src="/assets/pages/img/no_data.png" style="height: 400px">')
            }
        });




    })
</script>

<#include "footer2.ftl"/>

